<template>
<van-button
      v-if="isFollowed"
      class="follow-btn"
      round
      size="small"
      :loading="Loading"
      @click="onFollow"
      >已关注</van-button
    >
    <van-button
      v-else
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      :loading="Loading"
      size="small"
      icon="plus"
      @click="onFollow"
      >关注</van-button
    >
</template>

<script>
import { addFollow, deleteFollow } from '@/api/user.js'
export default {
  name: 'FollowUser',

  data() {
    return {
       Loading:false//关注按钮的加载状态
    }
  },
props:{
  isFollowed:{
    type:Boolean,
    required:true
  },
  userid:{
    type:[String,Number,Object],
    required:true
  }
},
  mounted() {},

  methods: {
        async onFollow() {
      //展示关注按钮的loading状态
      this.Loading=true
      try {
        if (this.isFollowed) {
          //已关注 取消关注
          await deleteFollow(this.userid)
        } else {
          // 未关注  关注
          await addFollow(this.userid)
        }
        // this.isFollowed = !this.isFollowed 不能这样写 props中的值不能修改
        this.$emit('update-isFollowed',!this.isFollowed)
      } catch (err) {
        let message = '操作失败,请重试'
        if (err.response && err.response.status === 400) {
          message = '自己不能关注自己'
        }
        this.$toast(message)
      }
       this.Loading=false
    },
  },
}
</script>

<style lang="less" scoped></style>
